<template>
	<view class="event-container">
		<view style="padding: 20rpx;">
			<view class="toast-top">
				<view class="flex">
					<text style="color: red;">*</text>
					<view class="desc">联系人</view>
				</view>
			</view>
			<view class="c-input">
				<input type="text" v-model="params['联系人']" placeholder="请输入联系人姓名">
			</view>
			<view class="toast-top">
				<view class="flex">
					<text style="color: red;">*</text>
					<view class="desc">联系方式</view>
				</view>
			</view>
			<view class="c-input">
				<input type="number" v-model="params['联系方式']" placeholder="请输入联系方式">
			</view>
			<view class="toast-top">
				<view class="flex">
					<text style="color: red;">*</text>
					<view class="desc">事件描述</view>
				</view>
			</view>
			<!-- <view class="title"><text style="color: red;">*</text>评价描述</view> -->
			<textarea style="height: 320rpx;" v-model="params['事件描述']" class="content" placeholder="请输入事件描述..." name="" id="" cols="30" rows="10"></textarea>
			<view class="toast-top">
				<view class="flex">
					<text style="color: #fff;">*</text>
					<view class="desc">附件</view>
				</view>
			</view>
			<uploader :max="6" :bmargin="6" v-model="params['事件附件']"></uploader>
			<view class="toast-top">
				<view class="flex">
					<text style="color: red;">*</text>
					<view class="desc">问题层面</view>
				</view>
			</view>
			<view @click="handleTap('picker1')" class="c-input">
				<text :class="{color: label1 === '请选择问题层面'}">{{label1}}</text>
				<lb-picker v-model="params['问题层面']" ref="picker1" mode="selector" :list="questionLevel" :dataset="{ name: 'label1' }"
				 @change="handleChange" @confirm="handleConfirm" @cancel="handleCancel">
				</lb-picker>
			</view>
			<view class="toast-top">
				<view class="flex">
					<text style="color: red;">*</text>
					<view class="desc">所在镇街</view>
				</view>
			</view>
			<view @click="handleTap('picker')" class="c-input">
				<text :class="{color: label === '请选择所在镇街'}">{{label}}</text>
				<lb-picker v-model="params['所在镇街']" ref="picker" mode="selector" :list="streetList" :dataset="{ name: 'label' }"
				 @change="handleChange" @confirm="handleConfirm" @cancel="handleCancel">
				</lb-picker>
			</view>
			<view class="toast-top">
				<view class="flex">
					<text style="color: red;">*</text>
					<view class="desc">处理类型</view>
				</view>
			</view>
			<view @click="handleTap('picker2')" class="c-input">
				<text :class="{color: label2 === '请选择处理类型'}">{{label2}}</text>
				<lb-picker v-model="params['处理类型']" ref="picker2" mode="selector" :list="handleType" :dataset="{ name: 'label2' }"
				 @change="handleChange" @confirm="handleConfirm" @cancel="handleCancel">
				</lb-picker>
			</view>
		</view>
		<button class="btn" @click="submit">提交</button>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	import uploader from '@/components/my-components/image-uploader.vue'
	import dayjs from 'dayjs'
	export default {
		components: {
			LbPicker,
			uploader
		},
		data() {
			return {
				questionLevel: [{
					label: '镇街',
					value: 1
				},{
					label: '区级',
					value: 2
				},{
					label: '市级及以上',
					value: 3
				}],
				handleType: [{
					label: '办理',
					value: 1
				},{
					label: '存档',
					value: 2
				}],
				streetList: [{
					label: '星桥街道',
					value: 1
				}],
				label: '请选择所在镇街',
				label1: '请选择问题层面',
				label2: '请选择处理类型',
				params: {
					上报时间: null,
					事件描述: null,
					事件标题: null,
					事件类别: null,
					事件附件: [],
					地址: null,
					处理类型: null,
					工单id: null,
					工单编号: null,
					联系人: '',
					联系方式: '',
					所在镇街: null,
					问题层面: null,
				}
			}
		},
		onLoad(options) {
			this.params.工单id = +options.id
			// console.log(JSON.parse(options.item))
			this.initParams(JSON.parse(options.item))
		},
		methods: {
			initParams(params) {
				this.params.事件标题 = this.$type.ticketType[params.工单类型]
				this.params.工单编号 = params.工单编号
				this.params.联系人 = params.联系人姓名
				this.params.联系方式 = params.联系人电话
				this.params.事件描述 = params.所属项目名称 + params.报事位置 + params.报事描述
				this.params.事件类别 = params.工单类型
				this.params.地址 = params.报事位置
				this.params.事件附件 = params.报事附件
			},
			submit() {
				if (this.params.联系人.trim() == '') {
					uni.showToast({
						title: '请填写联系人',
						icon: 'none'
					})
				} else if (this.params.联系方式.trim() == '') {
					uni.showToast({
						title: '请填写联系方式',
						icon: 'none'
					})
				} else if(this.params['事件描述'].trim() == '') {
					uni.showToast({
						title: '请填写事件描述',
						icon: 'none'
					})
				} else if(!this.params.问题层面) {
					uni.showToast({
						title: '请选择问题层面',
						icon: 'none'
					})
				} else if(!this.params.所在镇街) {
					uni.showToast({
						title: '请选择所在镇街',
						icon: 'none'
					})
				} else if(!this.params.处理类型) {
					uni.showToast({
						title: '请选择处理类型',
						icon: 'none'
					})
				} else {
					this.addEvent()
				}
			},
			addEvent() {
				this.params.上报时间 = dayjs(Date.now()).format("YYYY-MM-DDTHH:mm:ssZ")
				uni.showLoading({
					mask: true
				})
				this.$http2.post('ticketSystem/district/add', this.params).then(res => {
					console.log(res)
					if (res.code === 10000) {
						uni.redirectTo({
							url: '/ticketSystem/acceptSuccess/acceptSuccess?path=../index/index' + '&title=返回工单首页'
						})
						
					}else if(res.code === 50010) {
						uni.showToast({
							title: '推送失败',
							icon: 'none'
						})
					}
				})
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(e) {
				console.log('change::', e)
			},
			handleConfirm(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					if (name && label) {
						this[name] = label
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '../../style/input.scss';
</style>
